<template>
    <div>
    <div class="goods">
        <div class="menu-wrapper" ref="menuWrapper">  
            <ul>
                <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex==index}" @click="selectMenu(index,$event)">
                    <!-- 用布尔判断该css是否显现        来自这里的index -->
                    <span class="text border-1px">
                        <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodsWrapper">
                                    <!-- ref取到整个元素，准备上滚动插件 -->
            <ul>
                <li v-for="item in goods" class="food-list food-list-hook">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li @click="selectFood(food,$event)" v-for="food in item.foods" class="food-item border-1px">
                            <div class="icon">
                                <img width="57" height="57" :src="food.icon">
                                                       <!-- 动态路径用绑定方式 -->
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="now">￥{{food.price}}</span>
                                    <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                                </div>
                                <div class="cartcontrol-wrapper">
                                    <cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol>
                                      <!-- 引入圆球加入购物车组件 -->
                                     <!-- 监听v-on:cart-add="cartAdd"，购物车组件如果提交了'cart-add'事件就调用这个cartAdd函数 -->
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
        <!-- 把selectFoods还给shopcart组件 -->
    </div>
    <food :food="selectedFood" ref="food"></food>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
import shopcart from '../../components/shopcart/shopcart.vue';
import cartcontrol from '../../components/cartcontrol/cartcontrol.vue';
import food from '../../components/food/food.vue';

const ERR_OK=0;

export default {
    props:{
        seller:{
            type: Object
        }
    },
    data(){
        return{
            goods:[],   
            //请求到之前先声明下
            listHeight:[],
            scrollY:0,
            selectedFood:{},
        };
    },
    components:{
        shopcart,
        cartcontrol,
        food
    },
    computed:{
        currentIndex(){
            for(let i=0;i<this.listHeight.length;i++){
                let height1=this.listHeight[i];
                let height2=this.listHeight[i+1];
                if(!height2 || (this.scrollY>=height1&&this.scrollY<height2)){
                    return i;
                }
            }
            return 0;
        },
        selectFoods(){        //在shopcart组件中被选中的food拥有了count。
            let foods=[];
            this.goods.forEach((good)=>{
                good.foods.forEach((food)=>{
                    if(food.count){
                        foods.push(food);
                    }
                });
            });
            return foods
        },
    },
    created(){
        this.classMap=['decrease','discount','special','invoice','guarantee'];

        this.$http.get('/api/goods').then((response)=>{
            response=response.data;
           
                this.goods=response.data;
                this.$nextTick(()=>{
                    this._initScroll();
                    this._calculateHeight();
                });
                
        })
    },
    methods:{
        _initScroll(){
            
            this.menuScroll=new BScroll(this.$refs.menuWrapper, {
                click:true
            });

            this.foodScroll=new BScroll(this.$refs.foodsWrapper, {
                click:true,
                probeType:3
                });

            this.foodScroll.on('scroll',(pos)=>{
                this.scrollY=Math.abs(Math.round(pos.y));
            })
        },
        _calculateHeight(){
            let foodList=this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
            let height=0;
            this.listHeight.push(height);
            for(let i=0;i<foodList.length;i++){
                let item=foodList[i];
                height+=item.clientHeight;
                this.listHeight.push(height);
            }

        },
        selectMenu(index,event){
            if(!event._constructed){
                return;
            }
            let foodList=this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
            let el=foodList[index];
            this.foodScroll.scrollToElement(el,300);
            console.log(index)
        },
        selectFood(food,event){
            if(!event._constructed){
                return;
            }
            this.selectedFood=food;
            this.$refs.food.show();
        },
        cartAdd(el) {
　　　　　　　　　 // dom元素更新后执行， 因此此处能正确打印出更改之后的值；
　          this.$nextTick(() => {
　          this.$refs.shopcart.drop(el);　//调用shopcart组件的drop()函数
            });
        },     
    }
}
</script>

<style lang="stylus">
    @import "../../common/stylus/mixin"

    .goods
      display flex
      position absolute
      top 174px
      bottom 64px
      width 100%
      overflow hidden
      .menu-wrapper
        flex 0 0 80px
        width 80px
        background #f3f5f7
        .menu-item
          display table
          height 54px
          width 56px
          line-height 14px
          padding 0 12px
          &.current
            position relative
            margin-top -1px
            z-index 10
            background #ffffff
            font-weight 700
            .text
              border-none()
          .icon
            display inline-block
            width 12px
            height 12px
            vertical-align top
            margin-right 2px
            background-size 12px 12px
            background-repeat no-repeat
            &.decrease
              bg-image('decrease_3')
            &.discount
              bg-image('discount_3')
            &.guarantee
              bg-image('guarantee_3')
            &.invoice
              bg-image('invoice_3')
            &.special
              bg-image('special_3')
          .text
            display table-cell
            width 56px
            vertical-align middle
            font-size 12px
            border-1px(rgba(7,17,27,0.1))

      .foods-wrapper
        flex 1
        .title
          padding-left 14px
          height 26px
          line-height 26px
          border-left 2px solid #d9dde1
          font-size 12px
          color rgb(147,153,159)
          background #f3f5f7
        .food-item
          display flex
          margin 18px
          padding-bottom 18px
          border-1px(rgba(7,17,27,0.1))
          &:last-child
            border-none()
            margin-bottom 0
          .icon
            flex:0 0 57px
            margin-right 10px
          .content
            flex 1
            .name
              margin 2px 0 8px 0
              height 14px
              line-height 14px
              font-size 14px
              color rgb(7,17,27)
            .desc,.extra
              line-height 10px
              font-size 10px
              color rgb(147,153,159)
            .desc
              line-height 12px
              margin-bottom 8px
            .extra
              .count
                margin-right 12px
            .price
              font-weight 700
              line-height 24px
              .now
                margin-right 8px
                font-size 14px
                color rgb(240,20,20)
              .old
                font-size 10px
                text-decoration line-through
                color rgb(147,153,159)
            .cartcontrol-wrapper
              position absolute
              right 0
              bottom 12px
            


</style>

